{% extends 'base.html' %}

{% block title %}博客详情{% endblock %}

{% block head %}
<link rel="stylesheet" href="{% static 'highlight/styles/github-dark.min.css' %}">
<script src="{% static 'highlight/highlight.min.js' %}"></script>
{% endblock %}

{% block main %}
<h1>Django详情</h1>
<hr>
<div class="mt-2">
    <img src="{% static 'image/me.jpg' %}" class="rounded-circle" alt="" height="40">
    <span class="ms-2">{{ blog.author.username }}</span>
    <span class="ms-2">于</span>
    <span calss="ms-2">{{ blog.pub_time|date:"Y年m月d日 h时i分"}}</span>发布
</div>
<hr>
<div class="py-2">
    {{ blog.content|safe }}
</div>
<hr>
<div class="mt-2">
    <h3>评论（{{ blog.comments.all|length }}）</h3>
    <form action="{% url 'blog:pub_blog_comment' %}" method="post">
        {% csrf_token %}
        <input type="hidden" name="blog_id" value="{{ blog.id }}">
        <div class="mt-2">
            <input type="text" class="form-control" placeholder="请输入评论内容" name="content" required>
        </div>
        <div class="text-end mt-2">
            <button type="submit" class="btn btn-primary">发表评论</button>
        </div>
    </form>
</div>
<div class="mt-2">
    <ul class="list-group list-group-flush">
        {% for comment in blog.comments.all %}
        <li class="list-group-item">
            <div class="d-flex justify-content-between text-body-secondary">
                <div class="user-info">
                    <img src="{% static 'image/me.jpg' %}" class="rounded-circle" width="50" height="50" alt="">
                    <span class="ms-2">{{ comment.author.username }}</span>
                </div>
                <div class="create-time" style="line-height: 40px;">
                    {{ comment.pub_time|date:"Y年m月d日 h时i分" }}
                </div>
            </div>
            <div class="mt-2">{{ comment.content }}</div>
        </li>
        {% endfor %}
    </ul>
</div>
<script>
    hljs.highlightAll();
</script>
{% endblock %}